<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">


	<div class="row">
          <!-- Page Header -->
          <div class="col-lg-12">
              <h1 class="page-header">Funcionário <small> <h:outputLabel value="#{subtitle}" /></small></h1>
          </div>
          <!--End Page Header -->
     </div>
	
	
	
	<div class="row">
		<div class="col-lg-12">
			<p:growl id="growl" showDetail="false"  life="6000"/>
		</div>
	</div>
	
	<div class="row">
		<div class="col-lg-12">
			<h:panelGroup id="mensagens" layout="block">
					<p:messages showDetail="false"/>
			</h:panelGroup>
		</div>
	</div>
			
	
	
	<h:form class="form-horizontal" prependId="false">
	
	
	<div class="row">
				<div class="col-lg-12" >
			         <div class="alert alert-info">
			         	<div class="btn-group">
				 			<h:commandButton value="Salvar" action="#{funcionarioBean.doSalvarFuncionario}" styleClass="btn btn-success btn-lg">
				 				<f:ajax execute="@form" render="@form :mensagens"/>
				 			</h:commandButton>
				 			<h:commandButton value="Voltar" action="#{funcionarioBean.doIrPagListaFuncionarios}" immediate="true" rendered="#{funcionarioBean.statusEdicao}" styleClass="btn btn-default btn-lg"/>
			 			</div>
			         </div>
			    </div>
			</div>
	
				
			<p:tabView id="cadFuncionario">
			
		        <p:tab title="Informações Pessoais">
		        
			        	<div class="row">
			        		
			        			<div class="col-sm-2">
									<div class="form-group">
										<h:outputLabel for="cpfFunc" value="CPF" />
										<h:inputText id="cpfFunc"
								         				value="#{funcionarioBean.funcionario.pessoa.cpf}"
								         				valueChangeListener="#{funcionarioBean.cpfCnpjFuncionarioAlterado}"
								         				required="true" requiredMessage="Entre com o CPF do Funcionário"
								         				onkeypress="return validaInteiroEventoKeyPress(event)"
														onkeyup="formataOnKeyUp(event, this, MASCARA_CPF, 'E')"
														style="text-align: left"
														maxlength="14"
														class="form-control" >
											<f:converter converterId="CpfCnpjConverter"/>
											<f:validator validatorId="CpfCnpjValidator"/>
											<f:ajax execute="@this" render="cadFuncionario"/>
										</h:inputText>
										
				
										<h:message for="cpfFunc" style="font-size: 10px; color:red"/>
		                        	</div>
								</div>
														
								<div class="col-sm-6">
									<div class="form-group">
		                                <h:outputLabel for="nomeFunc" value="Nome"/>           
		                                <h:inputText id="nomeFunc" value="#{funcionarioBean.funcionario.pessoa.nome}" required="true" requiredMessage="Entre com o NOME do Funcionário" maxlength="70" class="form-control"/>           
		                                <h:message for="nomeFunc" style="font-size: 10px; color:red"/>         
		                            </div>
								</div>
								
								<div class="col-sm-2">
									<div class="form-group">
										<h:outputLabel value="Sexo" for="sexoFunc"/>
										<h:selectOneMenu id="sexoFunc" value="#{funcionarioBean.funcionario.pessoa.sexo}" required="true" requiredMessage="Entre com o SEXO do Funcionáro" class="form-control">
											<f:selectItem itemValue="#{null}" itemLabel=" "/>   
											<f:selectItems value="#{funcionarioBean.tiposDeSexo}"/> 
											<f:converter converterId="omnifaces.GenericEnumConverter"/> 
										</h:selectOneMenu> 
										<h:message for="sexoFunc" style="font-size: 10px; color:red"/>
									</div>
								</div>
								
								<div class="col-sm-2">
									<div class="form-group">
										<h:outputLabel for="dataNascFunc" value="Data Nasc."/>
										<h:inputText id="dataNascFunc"
							         				value="#{funcionarioBean.funcionario.pessoa.dataNasc}" 
							         				onkeypress="return validaInteiroEventoKeyPress(event)"
													onkeyup="formataOnKeyUp(event, this, MASCARA_DATA, 'E')"
													required="true" 
													requiredMessage="Entre com a DATA DE NASC. do Funcionário"
													converterMessage="Data nasc. inválida" 
													style="text-align: left"
													maxlength="10" 
													class="form-control" >
											<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
										</h:inputText>
										<h:message for="dataNascFunc" style="font-size: 10px; color:red"/>
									</div>
								</div>
								
			        	</div>
			        	<!-- fim row 1 -->
			        	
			        	<div class="row">
			        		
			        		<div class="col-sm-6">
								<div class="form-group">
									<h:outputLabel for="emailFunc" value="E-Mail"/>
									<h:inputText id="emailFunc" 
												 label="email" 
												 value="#{funcionarioBean.funcionario.pessoa.email}"
												 validatorMessage="e-Mail inválido" 
												 maxlength="70"
												 class="form-control">
											<f:validateRegex pattern="[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-\_\.]+" />
									</h:inputText>
								</div>
							</div>
			        	
			        	
			        		<div class="col-sm-2">
								<div class="form-group">
									<h:outputLabel for="telefone1" value="Telefone 1"/>
									<h:inputText id="telefone1" value="#{funcionarioBean.funcionario.pessoa.telefone1}" maxlength="15" class="form-control"/>
								</div>
							</div>
			        	
			        		<div class="col-sm-2">
								<div class="form-group">
									<h:outputLabel for="telefone2" value="Telefone 2"/>
									<h:inputText id="telefone2" value="#{funcionarioBean.funcionario.pessoa.telefone2}" maxlength="15" class="form-control"/>
								</div>
							</div>
			        	
			        	</div>
			        	<!-- fim row 2 -->
			        	
			        	
			        	<div class="row">
				        	<fieldset>
								<legend>Endereco</legend>
				        		<div class="container col-sm-12">
					        		<div class="row">
						        		<div class="col-sm-2">
											<div class="form-group">
												 <h:outputLabel for="cepEnd" value="CEP" />
												<h:inputText id="cepEnd"
								         				value="#{funcionarioBean.funcionario.pessoa.endereco.cep}" 
								         				required="true"
								         				requiredMessage="Entre com o CEP do endereço"
								         				onkeypress="return validaInteiroEventoKeyPress(event)"
														onkeyup="formataOnKeyUp(event, this, MASCARA_CEP, 'E')"
														style="text-align: left"
														maxlength="10" 
														class="form-control">
														<f:converter converterId="CepConverter"/>
														<f:validator  validatorId="CepValidator"/>
												</h:inputText>
												<h:message for="cepEnd" style="font-size: 10px; color:red"/>
											</div>
										</div>
							        	<div class="col-sm-6">
												<div class="form-group">
													<h:outputLabel for="lograd" value="Logradouro" />
													<h:inputText id="lograd" value="#{funcionarioBean.funcionario.pessoa.endereco.logradouro}" maxlength="40" class="form-control"/>
												</div>
										</div>
										<div class="col-sm-1">
											<div class="form-group">
												<h:outputLabel for="numLograd" value="Número"/>
												<h:inputText id="numLograd"
									         				value="#{funcionarioBean.funcionario.pessoa.endereco.numLogradouro}" 
									         				onkeypress="return validaInteiroEventoKeyPress(event)"
															onkeyup="formataOnKeyUp(event, this, MASCARA_INTEIRO, 'D')"
															style="text-align: rigth"
															maxlength="6"
															class="form-control" >
												</h:inputText>
											</div>
										</div>
							        		
										<div class="col-sm-3">
											<div class="form-group">
												<h:outputLabel for="complEnd" value="Complemento"/>
												<h:inputText id="complEnd" value="#{funcionarioBean.funcionario.pessoa.endereco.complemento}" maxlength="15" class="form-control"/>
											</div>
										</div>
					        		</div>
				        		
						        	<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<h:outputLabel for="bairro" value="Bairro"/>
												<h:inputText id="bairro" value="#{funcionarioBean.funcionario.pessoa.endereco.bairro}" maxlength="30" class="form-control"/>
											</div>
										</div>
										
										<div class="col-sm-4">
											<div class="form-group">
												<h:outputLabel for="cidade" value="Cidade"/>
												<h:inputText id="cidade" value="#{funcionarioBean.funcionario.pessoa.endereco.cidade}" maxlength="30" class="form-control"/>
											</div>
										</div>
										
										<div class="col-sm-1">
											<div class="form-group">
												<h:outputLabel for="uf" value="UF"/>
												<!-- <h:inputText id="uf" value="#{funcionarioBean.funcionario.pessoa.endereco.uf}" maxlength="2" class="form-control"/> -->
												
												<h:selectOneMenu id="uf" value="#{funcionarioBean.funcionario.pessoa.endereco.uf}" required="true" requiredMessage="Entre com a UF do endereço" class="form-control">
													<f:selectItem itemValue="#{null}" itemLabel=" "/>   
													<f:selectItem itemLabel="MG" itemValue="MG"/> 
												</h:selectOneMenu> 
										
										
											</div>
										</div>
									
				        			</div>
						    	</div>
				        	</fieldset>
			        	</div>
			        	
			    </p:tab>
		        <!-- fim informaçoes pessoais -->
		        
   				<p:tab title="Informações Profissionais">
		        	
					<div class="col-sm-2">
						<div class="form-group">
							<h:outputLabel for="dataAdmissao" value="Data Admissão"/>
							<h:inputText id="dataAdmissao"
					         				value="#{funcionarioBean.funcionario.dataAdmissao}" 
					         				onkeypress="return validaInteiroEventoKeyPress(event)"
											onkeyup="formataOnKeyUp(event, this, MASCARA_DATA, 'E')"
											required="true" 
											requiredMessage="Entre com a DATA DE ADMISSÃO do Funcionário"
											converterMessage="Data admissão inválida"  
											style="text-align: left"
											maxlength="10" 
											class="form-control" >
								<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
							</h:inputText>
							<h:message for="dataAdmissao" style="font-size: 10px; color:red"/>
						</div>
					</div>
					
					<div class="col-sm-3">
						<div class="form-group">
							<h:outputLabel for="cargo" value="Cargo"/>
							<h:selectOneMenu id="cargo" value="#{funcionarioBean.funcionario.cargo}" required="true" requiredMessage="Entre com o CARGO do Funcionáro" class="form-control">
								<f:selectItem itemValue="#{null}" itemLabel=" "/>  
								<f:selectItems  value="#{funcionarioBean.cargosDisponiveis}" var="cargo" itemValue="#{cargo}" itemLabel="#{cargo.nomeCargo}"/> 
							</h:selectOneMenu> 
						</div>
					</div>
					
					<div class="col-sm-2">
						<div class="form-group">
							<h:outputLabel for="dataRecisao" value="Data Recisão" />
							<h:inputText id="dataRecisao"
					         				value="#{funcionarioBean.funcionario.dataRecisao}" 
					         				converterMessage="Data recisão inválida" 
					         				onkeypress="return validaInteiroEventoKeyPress(event)"
											onkeyup="formataOnKeyUp(event, this, MASCARA_DATA, 'E')"
											style="text-align: left"
											maxlength="10" 
											class="form-control" >
								<f:convertDateTime type="date" pattern="dd/MM/yyyy" />
							</h:inputText>
						</div>
					</div>
		        </p:tab>
        
        	</p:tabView>
	
		
	</h:form>
	
</ui:fragment>